<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,.3);
            position: fixed;
            /*top: 0;
            left: 0;
            right: 0;
            bottom: 0;*/
            /*width: 100vw;
            height: 100vw;*/
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <!-- lorem*50-->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus, ea inventore libero odit quia
        quisquam vero? At autem enim, obcaecati placeat repellendus repudiandae sequi suscipit voluptatem. Id molestiae,
        non?
    </div>
    <div>Aspernatur at debitis deserunt dignissimos error eum explicabo impedit ipsa maiores molestiae nesciunt
        provident quae, quo quod rem ullam voluptatem. Accusantium ad eaque error ipsam laudantium perspiciatis saepe
        vero? Distinctio!
    </div>
    <div>A assumenda cumque debitis doloremque fugit ipsa numquam odio quibusdam quisquam quo? Accusantium beatae,
        distinctio dolores doloribus fuga fugit id illum labore minima, nihil nisi perspiciatis quasi sed similique
        tempore.
    </div>
    <div>Accusamus debitis deserunt dolore ea ex ipsa, itaque magni mollitia pariatur repellat tempore ullam vel velit.
        Ad alias aliquam atque autem, eius error facere inventore nobis porro quia, suscipit tempore?
    </div>
    <div>Accusantium aspernatur consectetur cumque dignissimos ex, iusto libero molestias nemo numquam officiis saepe
        sit sunt tempore ullam, velit. Ab beatae deleniti distinctio dolores, hic iure minus nulla ratione tempora
        tempore!
    </div>
    <div>Eveniet in inventore itaque porro provident quam quasi, veritatis voluptatem! Aperiam assumenda atque aut
        consectetur eligendi eos expedita facilis ipsum mollitia natus, nobis nulla numquam officia quas quibusdam
        repellendus vel?
    </div>
    <div>Aliquam consectetur debitis doloribus eveniet exercitationem explicabo fugiat fugit hic id iusto modi,
        molestiae molestias, nam, officiis optio perferendis praesentium quia quidem sit soluta tempore vel voluptatem.
        Ad cum, laboriosam.
    </div>
    <div>At autem commodi corporis, deleniti, dolores est facere fugiat inventore ipsam, neque repellendus sint vitae?
        Ad commodi error, eveniet in incidunt mollitia non, quaerat quasi, quibusdam tempora tempore voluptates
        voluptatibus!
    </div>
    <div>Eaque incidunt nisi praesentium veritatis. Accusamus consequatur corporis, deleniti eaque enim in laboriosam
        natus nostrum quis quo tempore totam! Animi atque delectus error, id magni minus officiis pariatur quod
        reiciendis.
    </div>
    <div>Aliquam, beatae delectus dicta ea eaque enim excepturi illo impedit labore nemo nulla numquam odio odit
        officiis pariatur quo rem sit soluta tenetur ut veniam vero, vitae, voluptas? Optio, temporibus!
    </div>
    <div>Aut autem commodi doloremque, dolores, eius enim error ex impedit, nam non obcaecati odio perspiciatis porro
        quae quo reiciendis rem sequi soluta suscipit tenetur vero voluptas voluptatum! Aut illo, quod?
    </div>
    <div>Adipisci cupiditate deleniti deserunt dolore doloremque eos et, illum in incidunt iste maxime necessitatibus,
        nemo neque nostrum obcaecati odit placeat quas quidem reprehenderit saepe soluta sunt suscipit tempore voluptas
        voluptate?
    </div>
    <div>Aspernatur blanditiis consectetur doloribus esse exercitationem illo optio provident sint suscipit tempora.
        Amet cupiditate deserunt enim, hic laborum natus nisi obcaecati officiis porro quis, quo rem ullam, ut vel
        voluptatem?
    </div>
    <div>Ab aliquam architecto, aspernatur debitis deserunt fuga fugiat ipsa magni nesciunt odio, possimus quibusdam
        quisquam vel. Aliquid at aut consectetur cupiditate fugiat perspiciatis quia sint ut. Animi non officiis
        placeat.
    </div>
    <div>Adipisci aspernatur, assumenda blanditiis consequuntur culpa dolorum ducimus, ea id natus nemo nihil nulla
        obcaecati, quasi qui ratione. Doloremque laborum nemo nesciunt nobis quis reiciendis, reprehenderit rerum!
        Labore ullam, vel.
    </div>
    <div>Asperiores aut corporis delectus dolor eius eos facilis fugiat illum impedit maiores odio officiis, perferendis
        placeat rerum sed similique, sit tempore voluptatibus. Atque, corporis deleniti hic neque obcaecati rerum
        voluptates!
    </div>
    <div>Ad assumenda beatae commodi debitis error excepturi fuga fugit, impedit molestias necessitatibus nihil nisi non
        perspiciatis porro provident quaerat repellendus reprehenderit sequi soluta sunt suscipit vel voluptatibus?
        Nemo, nulla, tenetur.
    </div>
    <div>Aliquid asperiores, fugit id ipsum maxime odio recusandae sunt. Asperiores assumenda deserunt dicta explicabo
        harum hic incidunt ipsa iusto libero maxime perferendis possimus recusandae, repellendus repudiandae sit, soluta
        ut voluptatibus?
    </div>
    <div>Ab aliquid architecto at, autem doloremque, dolorum explicabo hic incidunt ipsa natus neque optio pariatur
        quaerat quasi quidem quis ratione voluptate. Doloremque, eum, sint? Cumque impedit magnam natus praesentium
        unde!
    </div>
    <div>Ab adipisci, asperiores aut consectetur consequatur eligendi, ipsam perferendis, quod ratione rem repellat
        totam. Eaque, esse laboriosam. Culpa debitis, et ex iste numquam quae quas, ullam unde velit veniam voluptas.
    </div>
    <div>Assumenda atque cum debitis dignissimos ea est ex facere fuga fugiat fugit iure minima non officia officiis
        pariatur perferendis porro quibusdam, quidem quo reprehenderit sint sit tenetur ullam veniam voluptas.
    </div>
    <div>Fuga, laboriosam, voluptate! Ab assumenda aut consectetur consequuntur, culpa cumque cupiditate deserunt
        dolores enim, eum explicabo fugit impedit iure maiores mollitia nisi non optio quaerat reiciendis sed sunt,
        temporibus vitae.
    </div>
    <div>Aperiam, assumenda corporis cupiditate deserunt, magnam minus nemo odio quisquam quo, rerum similique vero
        vitae. Aliquid eos esse ipsum nam nihil, possimus quos saepe similique ullam vitae! Assumenda, fugit ipsa?
    </div>
    <div>Aliquid consequatur corporis doloribus, impedit ipsam labore, laborum libero nam natus nesciunt, obcaecati
        officia optio provident quaerat voluptates? Assumenda delectus exercitationem molestiae mollitia nemo, non qui
        quidem temporibus voluptatibus. Sint!
    </div>
    <div>Animi enim eos exercitationem fugiat impedit ipsum perferendis quia quidem soluta unde. Accusamus magni
        obcaecati optio quam quas ratione sint tempora! Eos natus perspiciatis quibusdam reiciendis rerum vitae?
        Sapiente, sit.
    </div>
    <div>Accusamus accusantium, alias, assumenda debitis dolor enim nam nihil officiis quisquam recusandae reiciendis,
        repudiandae tempore velit? At atque eaque, eius illum necessitatibus quasi tenetur ut voluptatem! Fugit qui
        totam ullam!
    </div>
    <div>Dignissimos iure, quisquam. Ab distinctio dolorum ducimus, eius harum iusto magnam, maiores natus nisi nobis
        nostrum odit possimus praesentium quis quod reprehenderit tenetur totam ut. Consectetur exercitationem iste
        pariatur praesentium!
    </div>
    <div>Distinctio, eaque libero nisi possimus recusandae repellat! Architecto autem dolorum ea labore nam nobis qui
        sed tempore unde vitae! Ad aliquid animi ea incidunt ipsa libero quas. Cupiditate error, reiciendis?
    </div>
    <div>Amet asperiores autem beatae debitis distinctio ducimus exercitationem facere fugit itaque maxime molestiae,
        nisi odio officiis, placeat quam quis sint sit voluptates voluptatibus voluptatum. Ad blanditiis minima quae
        quidem ullam.
    </div>
    <div>Aperiam commodi dignissimos dolores ducimus ipsa, itaque labore magnam, necessitatibus, nostrum porro
        praesentium quas quia quis saepe ullam. Aliquid consequuntur eos eveniet fuga harum necessitatibus unde
        voluptatum? Delectus suscipit, tenetur!
    </div>
    <div>Consequuntur corporis dicta dolorem eius esse est hic id ipsa ipsam, ipsum iste modi mollitia necessitatibus
        nesciunt officiis omnis quam, quasi qui quo ratione repudiandae vel vitae voluptas! Necessitatibus, soluta!
    </div>
    <div>Corporis, odit, rem! Architecto cum deserunt ducimus est eveniet, fuga fugit illo laudantium molestias omnis
        pariatur porro, qui quo quod repellat repellendus reprehenderit saepe suscipit tenetur veniam? Cum, odio, quia.
    </div>
    <div>Asperiores ea facere hic ipsum iusto molestias placeat provident quia reiciendis voluptatem? Aperiam,
        architecto illum, molestiae natus necessitatibus nihil nobis omnis quam rem repellat sunt tenetur ut veniam
        veritatis voluptatibus?
    </div>
    <div>Ab aut commodi culpa dolor eius eligendi, expedita fugiat illo, impedit incidunt laudantium maxime
        necessitatibus placeat quis quisquam rem totam? Architecto asperiores cum ex exercitationem id illo molestias
        numquam praesentium.
    </div>
    <div>A dolore esse exercitationem mollitia sunt? A ab assumenda ducimus facilis magnam magni sint veniam voluptatum.
        Accusantium architecto assumenda earum itaque iusto perspiciatis quibusdam veniam? Asperiores deleniti odio odit
        repudiandae?
    </div>
    <div>Amet blanditiis deleniti, et hic ipsa perferendis, placeat porro quidem quos ratione reiciendis, vero.
        Doloremque fugiat necessitatibus nihil nulla praesentium rem tempore voluptate, voluptates? A est ex quisquam
        quod similique.
    </div>
    <div>Architecto dicta, dolores doloribus expedita explicabo hic id ipsam laudantium modi nobis perferendis similique
        sit tempore. Alias dolor est exercitationem ipsum laborum nisi, obcaecati possimus, praesentium sit soluta
        tenetur vero.
    </div>
    <div>Accusamus asperiores corporis cumque dignissimos dolor eius, eos error harum hic inventore iure maiores odit
        officiis perspiciatis provident quam qui quis totam, vel veritatis? A accusamus natus officia quos unde.
    </div>
    <div>Mollitia, nam provident. Earum eius fugit odio quas quo ratione similique sint tenetur, veritatis vero.
        Adipisci aliquid beatae, facilis fugiat fugit, iste iusto magni maxime necessitatibus quibusdam repellat vel,
        veniam?
    </div>
    <div>A amet consequatur dolor esse hic, id illum, impedit magnam neque non obcaecati officia omnis perspiciatis
        possimus quae rerum suscipit ut voluptatum? Adipisci alias autem, eius inventore repudiandae suscipit
        voluptatibus.
    </div>
    <div>Culpa deleniti molestiae provident quo similique. Ab atque, delectus distinctio dolorum ducimus exercitationem
        illo libero nemo nulla porro quaerat, qui, ullam veritatis! Aliquam dolorum facere illo quas temporibus! Quasi,
        reprehenderit.
    </div>
    <div>Alias amet blanditiis dignissimos ea eos, explicabo, maxime omnis optio, pariatur temporibus unde velit
        voluptatem? At, deserunt dignissimos doloribus expedita explicabo fugiat illum ipsa porro praesentium quos sit
        unde vero.
    </div>
    <div>Atque blanditiis, consectetur consequatur, explicabo illum inventore nobis non odio officiis porro quidem rem,
        sunt. Alias consectetur, deleniti eos fuga hic ipsa labore mollitia, nobis quam quas, quo repellat sit.
    </div>
    <div>Ab animi aspernatur, corporis dolorem et ex facere harum, id impedit ipsum iusto laboriosam nihil, odio
        officiis quibusdam rem voluptates! Cumque doloribus ex nesciunt nulla, praesentium soluta. Consectetur,
        doloribus, molestiae?
    </div>
    <div>Cupiditate debitis dicta dolore dolorem ducimus ex explicabo facilis magni, nulla quam quo repellat tempora
        vel! Blanditiis consequuntur delectus ducimus excepturi harum iste itaque, obcaecati rem repudiandae! Fugit,
        rem, totam.
    </div>
    <div>Atque cumque eos laborum quo repellendus reprehenderit tempore. Ad aliquam amet consectetur distinctio
        doloribus eligendi est ipsum minus, molestiae neque nostrum optio praesentium quisquam sapiente suscipit! Dolor
        enim eum quia.
    </div>
    <div>Accusamus at atque consectetur corporis dignissimos eum fugiat fugit impedit, iure iusto laudantium minus nisi
        non numquam odit perspiciatis possimus praesentium quaerat quas sapiente sequi sint tempora, tenetur. Eveniet,
        officia.
    </div>
    <div>Dolor, dolorem dolorum eaque eum, facilis harum hic id iste minima quam quas qui reprehenderit repudiandae sit
        soluta! Cupiditate dolorum esse eveniet impedit incidunt molestias numquam quis ratione, sint voluptas.
    </div>
    <div>Accusamus adipisci animi aspernatur at consectetur cum delectus eos est eum eveniet illo inventore ipsam iste
        iure nam optio quis, recusandae rem sit suscipit temporibus unde vitae! Ea, praesentium, tenetur.
    </div>
    <div>Aliquam dolorum error, esse fugiat maiores mollitia non quis suscipit vel! Ab blanditiis cumque esse iure
        laudantium, nostrum numquam odio ratione saepe voluptatibus. Aut facere odit provident suscipit velit veritatis?
    </div>
</div>
</body>
</html>